import { useState, FC } from "react"
import styles from "./TabHolographic.less"
import { isValidKey } from "@/utils/formatData"
import MutilTabs from "@/components/MutilTabs"
import { IMutilTabsProps } from "@/components/MutilTabs/index"
import FirstMedicalERecords from "./../FirstMedicalERecords/FirstMedicalERecords"
import MedicalRecords from "@/components/patientsCom/MedicalRecords"
import CheckReport from "@/components/patientsCom/CheckReport"
import TestReport from "@/components/patientsCom/TestReport"
import MedicalAdvice from "@/components/patientsCom/MedicalAdvice"
import NursingRecords from "@/components/patientsCom/NursingRecords"
import SurgicalRecords from "@/components/patientsCom/SurgicalRecords"

interface PlanItemPro<T> {
  item: T,
  // planItemAcId: string
}

interface Iplan {
  id: string,
  state: number,
  time: string,
  diagnosis: string,
  departments: string
}

// interface TabHolographicPro<T> {
//   holographicModel: Array<T>
// }

const holographicModel: Array<Iplan> = [
  {
    id: "0",
    state: 0,
    time: "2020-10-11",
    diagnosis: "慢性胃炎",
    departments: "内科"
  },
  {
    id: "1",
    state: 1,
    time: "2020-10-11",
    diagnosis: "慢性胃炎",
    departments: "内科"
  },
  {
    id: "2",
    state: 2,
    time: "2020-10-11",
    diagnosis: "慢性胃炎",
    departments: "内科"
  },
  {
    id: "3",
    state: 2,
    time: "2020-10-11",
    diagnosis: "慢性胃炎",
    departments: "内科"
  },
  {
    id: "4",
    state: 2,
    time: "2020-10-11",
    diagnosis: "慢性胃炎",
    departments: "内科"
  },
  {
    id: "5",
    state: 2,
    time: "2020-10-11",
    diagnosis: "慢性胃炎",
    departments: "内科"
  },

]

interface IcolorMap {
  state: number,
  stateStr: string,
  color: string,
}


const colorMap: Array<IcolorMap> = [
  {
    state: 0,
    stateStr: "门",
    color: "#FECE4A",
  },
  {
    state: 1,
    stateStr: "住",
    color: "#FE754A",

  },
  {
    state: 2,
    stateStr: "急",
    color: "#FF3530",
  }
]






const tabHolographic: FC = () => {


  const [planItemAcId, setPlanItemAcId] = useState<string>("0")

  const [tabValue, setTabValue] = useState<string>("0")

  const handlerTabs = (key: string) => {
    setTabValue(key)
  }

  const tabPanes: IMutilTabsProps = {
    tabValue: tabValue,
    tabsAtrrs: {
      className: "",
      onChange: (key: string) => { handlerTabs(key) },
    },

    columns: [
      {
        className: "",
        tab: "首次病程记录",
        children: <FirstMedicalERecords />,
      },
      {
        className: "",
        tab: "病程记录",
        children: <MedicalRecords />,
      },
      {
        className: "",
        tab: "检查",
        children: <CheckReport />,
      },
      {
        className: "",
        tab: "检验",
        children: <TestReport />,
      },
      {
        className: "",
        tab: "医嘱信息",
        children: <MedicalAdvice />,
      },
      {
        className: "",
        tab: "护理记录",
        children: <NursingRecords />,
      },
      {
        className: "",
        tab: "手术记录",
        children: <SurgicalRecords />,
      }
    ]
  }


  const PlanItem = (props: PlanItemPro<Iplan>) => {
    const { item } = props
    return (
      <li className={`${planItemAcId === item.id ? styles.planItemAc : styles.planItem}`}
        onClick={() => { setPlanItemAcId(item.id) }}>
        <div
          className={styles.title}
          style={{ backgroundColor: isValidKey(item.state, colorMap) ? colorMap[item.state].color : "" }}
        >
          {isValidKey(item.state, colorMap) ? colorMap[item.state].stateStr : ""}
        </div>
        <div className={`${planItemAcId === item.id ? styles.planIconAc : styles.planIcon}`} />
        <div className={styles.time}>{item.time}</div>
        <div className={styles.diagnosis}>{item.diagnosis}</div>
        <div className={styles.departments}>{item.departments}</div>
      </li>
    )
  }

  return (
    <div className={styles.tabHolographicBox}>
      <ul className={styles.planList}>
        <div className={styles.planBorder} style={{ width: (holographicModel.length) * (100 + 17) - 34 }} />
        {
          holographicModel.map((item: Iplan) => {
            return <PlanItem item={item} key={item.id} />
          })
        }
      </ul>
      <div className={styles.otherBox}>
        <div className={styles.otherMain}>
          <MutilTabs {...tabPanes} />
        </div>

      </div>

    </div >
  )
}

export default tabHolographic